<template>
  <div class="padding-xs page-main">
    <div class="page-text">
      <span style="color: red;line-height: 40px">注意：只支持json格式数据</span>
    </div>
    <div class="monaco-content">
      <Monaco ref="monaco" :data="data" language="json" height='100%'></Monaco>
    </div>
  </div>
</template>

<script>
  import {Monaco} from "@/components";

  export default {
    name: "dataValue",
    components: {
      Monaco
    },
    props: {
    },
    data(){
      return {
        data:''
      }
    },
    watch: {
      data: {
        deep: true,
        immediate: true,
        handler(newVal,oldVal) {
          if(newVal){
            this.$refs.monaco.setValue(newVal);
          }
        },
      }
    },
    methods:{
      getData(){
        return this.$refs.monaco.getValue()
      }
    }
  }
</script>

<style scoped>
  .page-main{
    height: calc(100vh - 76px);
    /*margin: 10px;*/
    display: flex;
    flex-direction: column;
  }
  .page-text {
    background-color: #fff;
    margin-bottom: 10px;
    height: 40px;
    padding-left:54px;
  }
  .monaco-content{
    flex: 1;
    background-color: #fff;
  }
</style>
